<template>
<div :class="$style.container">
  <div :class="$style.top">
    <Swiper :imgs="imgs"/>
    <Search :class="$style.search"/>
  </div>
  <Comedy :lists="comedyArr" title="喜剧" @handleItem="handleItemClick"/>
  <Action :lists="actionArr" title="动作" @handleItem="handleItemClick"/>
  <Science :lists="scienceArr" title="科幻" @handleItem="handleItemClick"/>
  <Footor/>
  <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>
<script>
import { Loading, Alert } from 'vux'
import Swiper from './components/swiper'
import http from '../../APIService/http'
import Comedy from './components/comedy'
import Action from './components/action'
import Science from './components/science'
import Footor from './components/footer'
import Search from './components/search'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: '',
      imgs: [],
      comedyArr: [],
      actionArr: [],
      scienceArr: []
    }
  },
  components: {
    Swiper,
    Comedy,
    Action,
    Science,
    Footor,
    Search,
    Loading,
    Alert
  },
  mounted () {
    this.init()
    let token = this.$Cookie.getToken() || ''
    if (token) {
      this.getUserInfo()
    }
  },
  methods: {
    async init () {
      try {
        this.showLoading = true
        let [hotRes, comedyRes, actionRes, scienceRes] = await Promise.all([
          http.get(`/dianshang/getHotFilm`),
          http.get(`/film/getFilmType`, { type: '喜剧' }),
          http.get(`/film/getFilmType`, { type: '动作' }),
          http.get(`/film/getFilmType`, { type: '科幻' })
        ])
        this.showLoading = false
        this.imgs = hotRes.data.map(item => ({
          url: '',
          img: item.coverurl,
          title: item.original_title
        }))
        this.comedyArr = comedyRes.data
        this.actionArr = actionRes.data
        this.scienceArr = scienceRes.data
      } catch (err) {
        console.log('get home page fail:', err)
        this.showLoading = false
      }
    },
    async getUserInfo () {
      let res = await http.get(`/users/getUserInfo`)
      if (res.code === 0) {
        this.$store.commit('SET_USER', res.data)
      }
    },
    // 点击
    handleItemClick (item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick (item) {
      try {
        let token = this.$Cookie.getToken()
        if (!token) {
          this.$router.push({
            path: '/login'
          })
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script> 
<style lang="less" module>
.container {
  .top {
    position: relative;
    .search {
      position: absolute;
      top:10px;
      right:10px;
      width: 355px;
      height: 40px;
      overflow: hidden; 
    }
  }
}
</style>